<script>
import { ref, computed } from 'vue';
import {
  ArrowLeftBold,
  ArrowRight,
  ArrowRightBold,
  Check,
  CirclePlus,
  EditPen,
  QuestionFilled,
} from "@element-plus/icons-vue";
import router from "@/router";
import axios from "axios";

export default {

  components: {
    // 如果你在模板中使用了这些图标组件，确保在此处注册
    ArrowLeftBold,
    ArrowRight,
    ArrowRightBold,
    Check,
    CirclePlus,
    EditPen,
    QuestionFilled,
  },
  data() {
    return {
       // 创建响应式变量
      name: '',
      age: '',
      contactNumber: '',
      gender: '',
      ethnicity: '汉族',
      email: '',
      politicalStatus: '',
      jobSeeking: '',
      educationStartDate: '',
      educationEndDate: '',
      major: '',
      degree: '',
      mainCourses: '',
      // 荣誉奖项数组
      honors: "",
      // 技能特长数组
      skills: "",
      // 项目经验数组
      programs: "",
      self: '',
      // 存储截图的变量
      screenshot: null,
      applyData: [
        {
          seekername: '张三',
          jobname: 'web前端',
          deliverdate: '2024 - 12 - 20',
          editing: false,
          tempseekername: '',
          tempjobname: '',
          tempdeliverdate: '',
          adding: false,
          resumeImagePath: '../../public/alibaba.png' // 假设的图片路径
        },
        // 可以添加更多初始数据
      ],
      exit: () => {
        router.push('/');
      },
      applyingRowIndex: -1,
      buttonState: 'post',
      currentCard: 'post',
      postData: [],
      addingRowIndex: -1,
      isInsideInput: false,
      search: '',
      applySearch: '',
      showResumeDialog: false,
      currentResumeImage: ''
    };
  },
  methods: {
    passDeliver(row){
      row.status = "同意面试";
       axios.post('http://localhost:8082/deliver/updateDeliver', {
         seekerid:row.seekerid,
            jobid: row.jobid,
         enterpriseid:row.enterpriseid,
         deliverdate:row.deliverdate,
         status:row.status
          }, {
            headers: {
              'Content-Type': 'application/json',
            },
          }).then(response => {
            if (response.data.success) {
              console.log(response.data.data);
            } else {
              alert('更新失败');
            }
          }).catch(error => {
            console.error('登录时出错:', error);
          });
    },
     refuseDeliver(row){
      row.status = "已拒绝";
       axios.post('http://localhost:8082/deliver/updateDeliver', {
         seekerid:row.seekerid,
            jobid: row.jobid,
         enterpriseid:row.enterpriseid,
         deliverdate:row.deliverdate,
         status:row.status
          }, {
            headers: {
              'Content-Type': 'application/json',
            },
          }).then(response => {
            if (response.data.success) {
              console.log(response.data.data);
            } else {
              alert('更新失败');
            }
          }).catch(error => {
            console.error('登录时出错:', error);
          });
    },
    allApplyFieldsFilled(row) {
      return row.tempseekername && row.tempjobname && row.tempdeliverdate;
    },
    saveApplyEdit(index) {
      const row = this.applyData[index];
      if (this.allApplyFieldsFilled(row)) {
        row.seekername = row.tempseekername;
        row.jobname = row.tempjobname;
        row.deliverdate = row.tempdeliverdate;
        row.editing = false;
        row.adding = false;
      }
    },
    checkAndSaveApply(index) {
      if (!this.isApplyInsideInput) {
        const row = this.applyData[index];
        if (this.allApplyFieldsFilled(row)) {
          this.saveApplyEdit(index);
        }
      }
    },
    handleApplyInputFocus() {
      this.isApplyInsideInput = true;
    },
    handleApplyInputBlur() {
      this.isApplyInsideInput = false;
    },
    toggleButton(side) {
      this.currentCard = side;
      this.buttonState = side;
    },
    addPostData() {
      console.log(this.storedId)
      this.postData.push({
        jobname: '',
        jobsalary:'',
        joblocation:'',
        askexperience: '',
        editing: true,
        tempjobname: '',

        tempjobsalary:'',
        tempjoblocation:'',
        tempaskexperience: '',
        adding: true
      });
      this.addingRowIndex = this.postData.length - 1;
    },
    deletePostData(index,row) {
      axios.post('http://localhost:8082/job/deleteJob', {
            jobid: row.jobid
          }, {
            headers: {
              'Content-Type': 'application/json',
            },
          }).then(response => {
            if (response.data.success) {
              console.log(response.data.data);
            } else {
              alert('更新失败');
            }
          }).catch(error => {
            console.error('登录时出错:', error);
          });
      this.postData.splice(index, 1);
      if (index === this.addingRowIndex) {
        this.addingRowIndex = -1;
      }
    },
    toggleEdit(row) {
      if (row.editing) {
        row.jobname = row.tempjobname;
        row.askexperience = row.tempaskexperience;
        row.jobsalary = row.tempjobsalary;
        row.joblocation = row.tempjoblocation;
        row.editing = false;
        row.adding = false;
        if (this.addingRowIndex!== -1) {
          this.addingRowIndex = -1;
        }
        if(row.jobid) {
          axios.post('http://localhost:8082/job/updateJob', {
            enterpriseid: this.storedId,
            jobid: row.jobid,
            jobname: row.jobname,
            jobsalary: row.jobsalary,
            joblocation: row.joblocation,
            askexperience: row.askexperience,
          }, {
            headers: {
              'Content-Type': 'application/json',
            },
          }).then(response => {
            if (response.data.success) {
              console.log(response.data.data);
            } else {
              alert('更新失败');
            }
          }).catch(error => {
            console.error('登录时出错:', error);
          });
        }
        else {
          axios.post('http://localhost:8082/job/insertJob', {
            enterpriseid: this.storedId,
            jobname: row.jobname,
            jobsalary: row.jobsalary,
            joblocation: row.joblocation,
            askexperience: row.askexperience,
          }, {
            headers: {
              'Content-Type': 'application/json',
            },
          }).then(response => {
            if (response.data.success) {
              console.log(response.data.data);
            } else {
              alert('更新失败');
            }
          }).catch(error => {
            console.error('登录时出错:', error);
          });
        }
      } else {
        row.editing = true;
        row.tempjobname = row.jobname;
        row.tempaskexperience = row.askexperience;
        row.tempjobsalary = row.jobsalary;
        row.tempjoblocation = row.joblocation;
      }
    },
    allFieldsFilled(row) {
      return row.tempjobname && row.tempaskexperience&& row.tempjobsalary&&row.tempjoblocation;
    },
    saveEdit(index) {
      const row = this.postData[index];
      if (this.allFieldsFilled(row)) {
        row.jobname = row.tempjobname;
        row.askexperience = row.tempaskexperience;
        row.editing = false;
        row.adding = false;
      }
    },
    checkAndSave(index) {
      if (!this.isInsideInput) {
        const row = this.postData[index];
        if (this.allFieldsFilled(row)) {
          this.saveEdit(index);
        }
      }
    },
    handleInputFocus() {
      this.isInsideInput = true;
    },
    handleInputBlur() {
      this.isInsideInput = false;
    },
    fetchSuggestions(queryString, cb) {
      console.log('fetchSuggestions called with query:', queryString);
      const suggestions = this.postData.filter(item => {
        if (typeof item.jobname ==='string') {
          return item.jobname.toLowerCase().indexOf(queryString.toLowerCase()) > -1;
        }
        return false;
      }).map(item => item.jobname);
      console.log('Suggestions:', suggestions);
      cb(suggestions);
    },
    handleSelect(item) {
      console.log('Selected item:', item);
    },
    handleChange(value) {
      console.log('Input value changed to:', value);
    },
    fetchApplySuggestions(queryString, cb) {
      console.log('fetchApplySuggestions called with query:', queryString);
      const suggestions = this.applyData.filter(item => {
        if (typeof item.jobname === 'string') {
          return item.jobname.toLowerCase().indexOf(queryString.toLowerCase()) > -1;
        }
        return false;
      }).map(item => item.jobname);
      console.log('Suggestions:', suggestions);
      cb(suggestions);
    },
    loadDataFromLocalStorage() {
      const dataFromPreviousPage = JSON.parse(localStorage.getItem('dataFromPreviousPage'));
      console.log(dataFromPreviousPage.context.seekername);
      if (dataFromPreviousPage.context.seekername) {
        this.name = dataFromPreviousPage.context.seekername;
      }
      if (dataFromPreviousPage.context.age) {
        this.age = dataFromPreviousPage.context.age;
      }
      if (dataFromPreviousPage.context.phone) {
        this.contactNumber = dataFromPreviousPage.context.phone;
      }
      if (dataFromPreviousPage.context.gender) {
        this.gender = dataFromPreviousPage.context.gender;
      }
      if (dataFromPreviousPage.context.email) {
        this.email = dataFromPreviousPage.context.email;
      }
      if (dataFromPreviousPage.context.identity) {
        this.politicalStatus = dataFromPreviousPage.context.identity;
      }
      if (dataFromPreviousPage.context.expectjob) {
        this.jobSeeking = dataFromPreviousPage.context.expectjob;
      }
      if (dataFromPreviousPage.context.startYear) {
        this.educationStartDate = dataFromPreviousPage.context.startYear;
      }
      if (dataFromPreviousPage.context.endYear) {
        this.educationEndDate = dataFromPreviousPage.context.endYear;
      }
      if (dataFromPreviousPage.context.degree) {
        this.degree = dataFromPreviousPage.context.degree;
      }
      if (dataFromPreviousPage.context.major) {
        this.major = dataFromPreviousPage.context.major;
      }
      if (dataFromPreviousPage.resume.part1) {
        this.mainCourses = dataFromPreviousPage.resume.part1;
      }
      if (dataFromPreviousPage.resume.part2) {
        this.skills = dataFromPreviousPage.resume.part3;
      }
      if (dataFromPreviousPage.resume.part3) {
        this.programs = dataFromPreviousPage.resume.part3;
      }
      if (dataFromPreviousPage.context.awards) {
        this.honors = dataFromPreviousPage.context.awards;
      }
      if (dataFromPreviousPage.resume.part4) {
        this.self = dataFromPreviousPage.resume.part4;
      }
      console.log(dataFromPreviousPage);
    },
    openResumeDialog(imagePath,row) {
         const formData = new FormData();
            formData.append('id', row.seekerid);
            axios.post('http://localhost:8082/COSandAI/selectByID', formData, {
              headers: {
                'Content-Type': 'multipart/form-data',
              },
            }).then(response=>{
              if (response.data.success) {
                console.log(111);
                console.log(response.data.data);
                localStorage.setItem('dataFromPreviousPage', JSON.stringify(response.data.data));
                this.loadDataFromLocalStorage();
              }
            })
      this.currentResumeImage = imagePath;
      this.showResumeDialog = true;
    },
    closeResumeDialog() {
      this.showResumeDialog = false;
    }
  },
  computed: {
    filteredPostData() {
      return this.postData.filter(item =>
        item.jobname.toLowerCase().includes(this.search.toLowerCase())
      );
    },
    filteredApplyData() {
      return this.applyData.filter(item =>
        item.jobname.toLowerCase().includes(this.applySearch.toLowerCase())
      );
    }
  },
    mounted() {
      // 在页面挂载时，从 localStorage 中获取存储的 id
      this.storedId = localStorage.getItem('userId');
      if (this.storedId) {
        console.log('Received id from localStorage:', this.storedId);
      } else {
        console.log('No id found in localStorage');
      }
     axios.post('http://localhost:8082/job/selectJobByEnterpriseId', {
        enterpriseid: this.storedId,
      }, {
        headers: {
          'Content-Type': 'application/json',
        },
     }).then(response => {
       console.log(response.data);
       this.postData = response.data;
     }).catch(error => {
       console.error('登录时出错:', error);
     });
      axios.post('http://localhost:8082/deliver/selectDeliverByEnterprise', {
        enterpriseid: this.storedId,
      }, {
        headers: {
          'Content-Type': 'application/json',
        },
      }).then(response => {
        console.log(response.data);
        this.applyData = response.data;
      }).catch(error => {
        console.error('登录时出错:', error);
      });
    }
};
</script>

<template>
  <div class="body1" style="background-color: #DBE2EF;background-size: cover;overflow-y: hidden">
    <el-row justify="center" style="margin-top: 40px">
      <el-col :span="24" style="justify-content: center;text-align: center;">
        <div class="card" v-if="currentCard === 'post'"
             style="background-color: #f9f7f7;width: 1500px;height: 800px;border: 0;">
          <el-table :data="filteredPostData" height="650"
                    style="width: 90%;margin: 50px auto 0 auto; border-radius: 15px;background-color: #DBE2EF;"
                    row-key="jobname">
            <el-table-column type="index" label="行号" width="100"></el-table-column>
            <el-table-column prop="jobname" label="岗位名" width="180">
              <template #default="scope">
                <div v-if="scope.row.editing">
                  <el-input
                      v-model="scope.row.tempjobname"
                      @blur="handleInputBlur; checkAndSave(scope.$index)"
                      @keyup.enter="checkAndSave(scope.$index)"
                      @focus="handleInputFocus"
                      :data-adding="scope.row.adding"
                      ref="dateInput"
                  ></el-input>
                </div>
                <div v-else>
                  {{ scope.row.jobname }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="askexperience" label="岗位要求">
              <template #default="scope">
                <div v-if="scope.row.editing">
                  <el-input
                      v-model="scope.row.tempaskexperience"
                      @blur="handleInputBlur; checkAndSave(scope.$index)"
                      @keyup.enter="checkAndSave(scope.$index)"
                      @focus="handleInputFocus"
                      :data-adding="scope.row.adding"
                      ref="addressInput"
                  ></el-input>
                </div>
                <div v-else>
                  {{ scope.row.askexperience }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="jobsalary" label="薪资" width="180">
              <template #default="scope">
                <div v-if="scope.row.editing">
                  <el-input
                      v-model="scope.row.tempjobsalary"
                      @blur="handleInputBlur; checkAndSave(scope.$index)"
                      @keyup.enter="checkAndSave(scope.$index)"
                      @focus="handleInputFocus"
                      :data-adding="scope.row.adding"
                      ref="dateInput"
                  ></el-input>
                </div>
                <div v-else>
                  {{ scope.row.jobsalary }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="joblocation" label="位置" width="180">
              <template #default="scope">
                <div v-if="scope.row.editing">
                  <el-input
                      v-model="scope.row.tempjoblocation"
                      @blur="handleInputBlur; checkAndSave(scope.$index)"
                      @keyup.enter="checkAndSave(scope.$index)"
                      @focus="handleInputFocus"
                      :data-adding="scope.row.adding"
                      ref="dateInput"
                  ></el-input>
                </div>
                <div v-else>
                  {{ scope.row.joblocation }}
                </div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="Operations" min-width="120" align="right">
              <template #header>
                <el-autocomplete
                    v-model="search"
                    :fetch-suggestions="fetchSuggestions"
                    placeholder="搜索岗位"
                    clearable
                    :trigger-on-focus="true"
                    @select="handleSelect"
                    @change="handleChange"
                />
              </template>
              <template #default="scope">
                <el-button type="primary" size="small" @click="toggleEdit(scope.row)">
                  {{ scope.row.editing ? '完成' : '编辑' }}
                </el-button>
                <el-button type="danger" size="small" @click="deletePostData(scope.$index,scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button style="width: 90%;margin: 20px auto 0 auto;border-radius: 15px" @click="addPostData">
            <el-icon size="30px" color="#3F72AF">
              <CirclePlus/>
            </el-icon>
          </el-button>
        </div>


        <div class="card" v-if="currentCard === 'apply'"
             style="background-color: #f9f7f7;width: 1500px;height: 800px;border: 0;">
          <el-table :data="filteredApplyData" height="650"
                    style="width: 90%;margin: 0 auto 0 auto; border-radius: 15px;background-color: #DBE2EF;"
                    row-key="deliverdate">
            <el-table-column type="index" label="行号" width="100"></el-table-column>
            <el-table-column prop="seekername" label="求职者姓名" width="180">
              <template #default="scope">
                <div v-if="scope.row.editing">
                  <el-input
                      v-model="scope.row.tempseekername"
                      @blur="handleApplyInputBlur; checkAndSaveApply(scope.$index)"
                      @keyup.enter="checkAndSaveApply(scope.$index)"
                      @focus="handleApplyInputFocus"
                      :data-adding="scope.row.adding"
                      ref="deliverdateInput"
                  ></el-input>
                </div>
                <div v-else>
                  {{ scope.row.seekername }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="jobname" label="投递岗位" width="180">
              <template #default="scope">
                <div v-if="scope.row.editing">
                  <el-input
                      v-model="scope.row.tempjobname"
                      @blur="handleApplyInputBlur; checkAndSaveApply(scope.$index)"
                      @keyup.enter="checkAndSaveApply(scope.$index)"
                      @focus="handleApplyInputFocus"
                      :data-adding="scope.row.adding"
                      ref="deliverdateInput"
                  ></el-input>
                </div>
                <div v-else>
                  {{ scope.row.jobname }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="deliverdate" label="投递时间" width="180">
              <template #default="scope">
                <div v-if="scope.row.editing">
                  <el-input
                      v-model="scope.row.tempdeliverdate"
                      @blur="handleApplyInputBlur; checkAndSaveApply(scope.$index)"
                      @keyup.enter="checkAndSaveApply(scope.$index)"
                      @focus="handleApplyInputFocus"
                      :data-adding="scope.row.adding"
                      ref="deliverdateInput"
                  ></el-input>
                </div>
                <div v-else>
                  {{ scope.row.deliverdate }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="简历" width="120" align="center">
              <template #default="scope">
                <el-button type="primary" size="small" @click="openResumeDialog(scope.row.resumeImagePath,scope.row)">查看简历
                </el-button>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="Operations" min-width="120" align="right">
              <template #header>
                <el-autocomplete
                    v-model="applySearch"
                    :fetch-suggestions="fetchApplySuggestions"
                    placeholder="搜索岗位"
                    clearable
                    :trigger-on-focus="true"
                    @select="handleSelect"
                    @change="handleChange"
                />
              </template>
              <template #default="scope">
                <div v-if="scope.row.status === '投递中'">
                  <el-button class="btn3" type="success"  size="small" @click="passDeliver(scope.row)">同意面试</el-button>
                  <el-button class="btn4"type="danger" size="small" @click="refuseDeliver(scope.row)">拒绝</el-button>
                </div>
                <div v-else-if="scope.row.status === '同意面试'" style="color: #67C23A">
                  同意面试</div>
                <div v-else-if="scope.row.status === '已拒绝'" style="color: #F56C6C">
                  已拒绝</div>
              </template>
            </el-table-column>
          </el-table>
          <el-dialog v-model="showResumeDialog" width="980px"
                     style="background-color: #f9f7f7;border-radius: 15px;transform: translateY(-50px);">
            <div class="card4"
                 style="background-color: #f9f7f7;overflow-y: auto;max-height: 750px;border: 0;box-shadow: 0 0 0 0 ">
              <el-descriptions
                  style="margin: 30px;"
                  class="margin-top"
                  title="基本信息"
                  :column="3"
                  :size="'default'"
              >
                <template #extra>
                  <el-button circle
                             @click="toggleEdit('base')">
                    <el-icon v-if="!isEditingBase" size="20px">
                      <EditPen/>
                    </el-icon>
                    <el-icon v-else>
                      <Check/>
                    </el-icon>
                  </el-button>
                </template>
                <el-descriptions-item>
                  <template #label>
                    姓名：
                  </template>
                  <label v-if="!isEditingBase">
                    {{ name }}
                  </label>
                  <el-input v-else v-model="name" @blur="checkEdit('base')" @keyup.enter="checkEdit('base')"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    年龄：
                  </template>
                  <label v-if="!isEditingBase">
                    {{ age }}
                  </label>
                  <el-input v-else v-model="age" @blur="checkEdit('base')" @keyup.enter="checkEdit('base')"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    联系电话：
                  </template>
                  <label v-if="!isEditingBase">
                    {{ contactNumber }}
                  </label>
                  <el-input v-else v-model="contactNumber" @blur="checkEdit('base')"
                            @keyup.enter="checkEdit('base')"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    性别：
                  </template>
                  <label v-if="!isEditingBase">
                    {{ gender }}
                  </label>
                  <el-input v-else v-model="gender" @blur="checkEdit('base')"
                            @keyup.enter="checkEdit('base')"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    民族：
                  </template>
                  <label v-if="!isEditingBase">
                    {{ ethnicity }}
                  </label>
                  <el-input v-else v-model="ethnicity" @blur="checkEdit('base')"
                            @keyup.enter="checkEdit('base')"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    邮箱：
                  </template>
                  <label v-if="!isEditingBase">
                    {{ email }}
                  </label>
                  <el-input v-else v-model="email" @blur="checkEdit('base')"
                            @keyup.enter="checkEdit('base')"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    政治面貌：
                  </template>
                  <label v-if="!isEditingBase">
                    {{ politicalStatus }}
                  </label>
                  <el-input v-else v-model="politicalStatus" @blur="checkEdit('base')"
                            @keyup.enter="checkEdit('base')"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    求职岗位：
                  </template>
                  <label v-if="!isEditingBase">
                    {{ jobSeeking }}
                  </label>
                  <el-input v-else v-model="jobSeeking" @blur="checkEdit('base')"
                            @keyup.enter="checkEdit('base')"></el-input>
                </el-descriptions-item>
              </el-descriptions>

              <el-descriptions
                  style="margin: 30px;"
                  class="margin-top"
                  title="教育背景"
                  :column="1"
                  :size="'default'"
              >
                <template #extra>
                  <el-button circle
                             @click="toggleEdit('education')">
                    <el-icon v-if="!isEditingEducation" size="20px">
                      <EditPen/>
                    </el-icon>
                    <el-icon v-else>
                      <Check/>
                    </el-icon>
                  </el-button>
                </template>
                <el-descriptions-item>
                  <template #label>
                    <el-row justify="space-between" style="color: #3F72AF;font-size: 18px;">
                      <el-col span="12" style="text-align: center;display: flex;flex-direction: row">
                        <label v-if="!isEditingEducation">
                          {{ educationStartDate }}
                        </label>
                        <el-input v-else v-model="educationStartDate" @blur="checkEdit('education')"
                                  @keyup.enter="checkEdit('education')"></el-input>
                        <label>-</label>
                        <label v-if="!isEditingEducation">
                          {{ educationEndDate }}
                        </label>
                        <el-input v-else v-model="educationEndDate" @blur="checkEdit('education')"
                                  @keyup.enter="checkEdit('education')"></el-input>
                      </el-col>
                      <el-col span="12" style="text-align: center;display: flex;flex-direction: row">
                        <label v-if="!isEditingEducation">
                          {{ major }}
                        </label>
                        <el-input v-else v-model="major" @blur="checkEdit('education')"
                                  @keyup.enter="checkEdit('education')"></el-input>
                        <label>-</label>
                        <label v-if="!isEditingEducation">
                          {{ degree }}
                        </label>
                        <el-input v-else v-model="degree" @blur="checkEdit('education')"
                                  @keyup.enter="checkEdit('education')"></el-input>
                      </el-col>
                    </el-row>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                  </template>
                  <label v-if="!isEditingEducation">
                    {{ mainCourses }}
                  </label>
                  <el-input v-else v-model="mainCourses" @blur="checkEdit('education')"
                            @keyup.enter="checkEdit('education')"></el-input>
                </el-descriptions-item>
              </el-descriptions>

              <el-descriptions
                  style="margin: 30px;"
                  class="margin-top"
                  title="技能特长"
                  :column="1"
                  :size="'default'"
              >
                <template #extra>
                  <el-button circle
                             @click="toggleEdit('skill')">
                    <el-icon v-if="!isEditingSkill" size="20px">
                      <EditPen/>
                    </el-icon>
                    <el-icon v-else>
                      <Check/>
                    </el-icon>
                  </el-button>
                </template>
                <el-descriptions-item>
                  <template #label>
                  </template>
                  <label v-if="!isEditingSkill">
                    {{ skills }}
                  </label>
                  <el-input v-else v-model="skills" @blur="checkEdit('skill')"
                            @keyup.enter="checkEdit('skill')"></el-input>
                </el-descriptions-item>
              </el-descriptions>

              <el-descriptions
                  style="margin: 30px;"
                  class="margin-top"
                  title="项目经验"
                  :column="1"
                  :size="'default'"
              >
                <template #extra>
                  <el-button circle
                             @click="toggleEdit('program')">
                    <el-icon v-if="!isEditingProgram" size="20px">
                      <EditPen/>
                    </el-icon>
                    <el-icon v-else>
                      <Check/>
                    </el-icon>
                  </el-button>
                </template>
                <el-descriptions-item>
                  <template #label>
                  </template>
                  <label v-if="!isEditingProgram">
                    {{ programs }}
                  </label>
                  <el-input v-else v-model="programs" @blur="checkEdit('program')"
                            @keyup.enter="checkEdit('program')"></el-input>
                </el-descriptions-item>
              </el-descriptions>

              <el-descriptions
                  style="margin: 30px;"
                  class="margin-top"
                  title="荣誉奖项"
                  :column="1"
                  :size="'default'"
              >

                <template #extra>
                  <el-button circle
                             @click="toggleEdit('honor')">
                    <el-icon v-if="!isEditingHonor" size="20px">
                      <EditPen/>
                    </el-icon>
                    <el-icon v-else>
                      <Check/>
                    </el-icon>
                  </el-button>
                </template>
                <el-descriptions-item>
                  <template #label>
                  </template>
                  <label v-if="!isEditingHonor">
                    {{ honors }}
                  </label>
                  <el-input v-else v-model="honors" @blur="checkEdit('honor')"
                            @keyup.enter="checkEdit('honor')"></el-input>
                </el-descriptions-item>

              </el-descriptions>
              <el-descriptions
                  style="margin: 30px;"
                  class="margin-top"
                  title="个人评价"
                  :column="1"
                  :size="'default'"
              >
                <template #extra>
                  <el-button circle
                             @click="toggleEdit('self')">
                    <el-icon v-if="!isEditingSelf" size="20px">
                      <EditPen/>
                    </el-icon>
                    <el-icon v-else>
                      <Check/>
                    </el-icon>
                  </el-button>
                </template>
                <el-descriptions-item>
                  <template #label>
                  </template>
                  <label v-if="!isEditingSelf">
                    {{ self }}
                  </label>
                  <el-input v-else v-model="self" @blur="checkEdit('self')" @keyup.enter="checkEdit('self')"></el-input>
                </el-descriptions-item>

              </el-descriptions>
            </div>
          </el-dialog>
        </div>
      </el-col>
    </el-row>
  </div>
  <el-button
      :class="{ 'active': buttonState === 'post', 'inactive': buttonState!== 'post' }" @click="toggleButton('post')"
      style="z-index: 99;position: absolute; top: 3%; left: 56px; transform: translateY(50%); "
  >招聘岗位
  </el-button>
  <el-button
      :class="{ 'active': buttonState === 'apply', 'inactive': buttonState!== 'apply' }" @click="toggleButton('apply')"
      style="z-index: 99;position: absolute; top: 16.7%; left: 45px; transform: translateY(50%); "
  >应聘消息
  </el-button>

  <button class="btn1" style="font-weight: bold;font-size:24px;
  z-index: 99;position: absolute; top: 0; right: 100px; transform: translateY(50%);box-shadow: 5px 5px 5px 2px #444444;"
          @click="exit"
  >
    退出登录
  </button>
</template>

<style scoped>
@import "../assets/css/global.css";
/* 活动状态按钮样式 */
.active {
  background-color: #3F72AF; /* 蓝色背景 */
  color: #f9f7f7; /* 白色文字 */
  padding: 60px 10px 60px 10px;
  border: 0;
  font-size: 24px;
  writing-mode: vertical-lr;
  transform: scale(1.1); /* 放大10% */
  transition: transform 0.3s ease; /* 添加过渡效果 */
  border-radius: 15px;
}

/* 非活动状态按钮样式 */
.inactive {
  background-color: #f9f7f7; /* 白色背景 */
  color: #3F72AF; /* 蓝色文字 */
  padding: 60px 10px 60px 10px;
  border: 0;
  font-size: 24px;
  writing-mode: vertical-lr;
  transition: transform 0.3s ease; /* 添加过渡效果 */
  border-radius: 15px;
}

/* 滚动条整体部分 */
::-webkit-scrollbar {
  width: 8px; /* 垂直滚动条的宽度 */
  height: 4px; /* 水平滚动条的高度 */
}

::-webkit-scrollbar-thumb {
  background-color: #3F72AF; /* 滑块颜色 */
  border-radius: 8px; /* 滑块圆角 */
}

::-webkit-scrollbar-track {
  width: 8px;
  height: 4px;
  border-radius: 8px;
  background-color: transparent; /* 轨道颜色 */
}

.card3 {
  margin: auto;
  text-align: center;
  justify-content: center;
  width: 936px;
  height: 700px;
  border: #bbbbbb solid 1px;
  border-radius: 50px;
  background: #DBE2EF;
  box-shadow: 15px 15px 20px 2px #444444;
  z-index: 1; /* 确保card2层级低于card1 */
}

.card {
  margin: auto;
  text-align: center;
  justify-content: center;
  width: 936px;
  height: 700px;
  border: #bbbbbb solid 1px;
  border-radius: 50px;
  background: #DBE2EF;
  box-shadow: 15px 15px 20px 2px #444444;
  z-index: 1; /* 确保card2层级低于card1 */
  display: flex;
  flex-direction: column;
}

.btn1 {
  padding: 10px;
  border: none;
  background-color: #f9f7f7;
  color: #3F72AF;
  font-size: 24px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 10px;
}

.btn1:hover {
  background-color: #3F72AF;
  color: #f9f7f7;
}

:deep(.el-descriptions__title) {
  background-color: #3F72AF;
  color: #f9f7f7;
  font-size: 24px;
  padding: 5px;
  border-radius: 10px;
}

:deep(.el-descriptions__body) {
  margin-top: -35px;
  background-color: rgba(255, 255, 255, 0.7);
  border: #3F72AF 1px solid;
  border-radius: 15px;
  padding: 25px 10px 10px 15px;
}

:deep(.el-descriptions__table) {
}

:deep(.el-descriptions__label) {
  font-weight: bold;
}

:deep(.el-descriptions__content) {
  text-align: left;
}

/* 滚动条整体部分 */
::-webkit-scrollbar {
  width: 8px; /* 垂直滚动条的宽度 */
  height: 4px; /* 水平滚动条的高度 */
}

/* 滚动条的滑块部分 */
::-webkit-scrollbar-thumb {
  background-color: #3F72AF; /* 滑块颜色 */
  border-radius: 8px; /* 滑块圆角 */
}

/* 滚动条的轨道部分 */
::-webkit-scrollbar-track {
  width: 8px;
  height: 4px;
  border-radius: 8px;
  background-color: transparent; /* 轨道颜色 */
}

:deep(.el-button) {
  background-color: #3F72AF;
  color: #f9f7f7;
  border: #3F72AF 1px solid;
}

:deep(.el-button):hover {
  background-color: #f9f7f7;
  color: #3F72AF;
  border: #3F72AF 1px solid;
}

.dropdown {
  background-color: #f9f7f7;
  color: #3F72AF;
  width: 150px;
  height: 30px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
}

.dropdown:hover {
  background-color: #3F72AF;
  color: #f9f7f7;
  width: 150px;
  height: 30px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
}

:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}

:deep(.el-overlay-dialog) {
  overflow-y: hidden;
}
:deep(.btn3) {
  background-color: #67C23A;
  color: #f9f7f7;
  border: #67C23A 1px solid;
}

:deep(.btn3):hover {
  background-color: #f9f7f7;
  color: #67C23A;
  border: #67C23A 1px solid;
}
:deep(.btn4) {
    background-color: #F56C6C;
    color: #f9f7f7;
    border: #F56C6C 1px solid;
  }
:deep(.btn4):hover {
    background-color: #f9f7f7;
    color: #F56C6C;
    border: #F56C6C 1px solid;
  }
</style>